<template>
  <view>
    <!-- 导航栏组件 -->
    <page-nav-bar></page-nav-bar>

    <!-- 置顶底图 -->
    <view class="background-image" style="background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));"></view>

    <view class="quality-detail-container">
      <!-- 镜片信息区域 -->
      <view class="lens-info-section">
        <view v-if="orderData && orderData.length > 0" v-for="(item, index) in orderData" :key="index">
          <view v-if="index == 0" class="warranty-card" >
            <view class="lens-info-section">
              <!-- 换新审核卡片 -->
              <view class="warranty-time-card" v-if="item.changeStatus == 0 || item.changeStatus == 1 || item.changeStatus == 2">
                <view class="change-circle">
                  <text class="days-number">✔</text>
                </view>
                <text class="warranty-time-title" v-if="item.changeStatus == 0 || item.changeStatus == 1">保障申请已完成，请等待门店通知</text>
                <text class="warranty-time-title" v-else>保障已完成</text>
                <text class="submit-change-time" v-if="item.changeStatus == 0 || item.changeStatus == 1">完成时间: {{ item.submitChangeTime }}</text>
                <text class="submit-change-time" v-else>完成时间: {{ item.updateTime }}</text>
                <text class="warranty-time-total">保障总时长: 183天</text>
              </view>
              <!-- 换新保障剩余时间卡片 -->
              <view class="warranty-time-card" v-else>
                <view class="days-circle">
                  <text class="days-number">{{ remainingDays(item) || 0 }}</text>
                  <text class="days-unit">天</text>
                </view>
                <text class="warranty-time-title">换新保障剩余时间</text>
                <text class="warranty-time-total">保障总时长: 183天</text>
              </view>
            </view>
            <view class="warranty-header">
              <text class="warranty-title">183天换新保障</text>
              <view class="status-tag" v-if="remainingDays(item) > 0">
                <text v-if="item.changeStatus == 0">审核中</text>
                <text v-else>已激活</text>
              </view>
              <view class="status-tag-expired" v-else>已到期</view>
            </view>
            <text class="warranty-desc">度数上涨超过50度，免费换新</text>

            <view class="warranty-info">
              <view class="info-row">
                <text class="info-text">激活日期</text>
                <text class="info-value">{{ item.createTime ? item.createTime.split(' ')[0] : '' }}</text>
              </view>
              <view class="info-row">
                <text class="info-text">到期日期</text>
                <text class="info-value">{{ item.expireTime ? item.expireTime.split(' ')[0] : '' }}</text>
              </view>
            </view>
            <view class="warranty-info">
              <view class="info-row">
                <text class="info-text">购买门店</text>
                <text class="info-value">{{ item.shopName || '' }}</text>
              </view>
              <!-- <view class="info-row">
                <text class="info-text">类型</text>
                <text class="info-value">{{ item.eye == 'L' ? '左镜片' : '右镜片' }}</text>
              </view> -->
              <view class="info-row">
                <text class="info-text">类型</text>
                <text class="info-value">双镜片</text>
              </view>
            </view>

            <view class="warranty-tip">
              <text class="tip-text"
                style="border-top: 1px solid #e6e6e6;padding-top: 10vw;">保障期内度数上涨超过50度，即可申请免费换新服务</text>
            </view>
          </view>
        </view>
      </view>


      <view class="lens-info-section" v-if="orderData && orderData.length > 0">
        <view class="warranty-card user-info-card">
          <text class="card-title">佩戴人信息</text>

          <view class="user-basic-info">
            <view class="avatar">
              <image :src="userInfo.avatarUrl || 'https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/tongren_avatar.png'" mode="aspectFill"></image>
            </view>
            <view class="user-details">
              <text class="user-name">{{ orderData && orderData[0] ? orderData[0].name || '' : '' }}</text>
              <text class="user-relation">佩戴人</text>
            </view>
          </view>

          <view class="user-info-grid">
            <view>
              <text class="info-label">年龄</text>
              <text class="info-label" style="margin-left: 35vw;">性别</text>
            </view>
            <view>
              <text class="info-label" style="font-weight: bold;">{{ orderData && orderData[0] && orderData[0].birthDate
                ? (new Date().getFullYear() - new Date(orderData[0].birthDate.split(' ')[0]).getFullYear()) + '岁' :
                '未填写年龄' }}</text>
              <text class="info-label" style="margin-left: 35vw;font-weight: bold;">{{ orderData && orderData[0] ?
                orderData[0].sex : '未填写性别' }}</text>
            </view>
          </view>

          <view class="user-phone">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{ orderData && orderData[0] ? orderData[0].phone || '未设置联系电话' : '' }}</text>
          </view>
        </view>
      </view>

      <!-- 镜片参数区域 -->
      <view class="lens-params-section">
        <view class="warranty-card user-info-card">
            <!-- 主标题 -->
          <view class="main-title">配镜参数</view>

          <!-- 右眼参数 -->
          <view class="parameter-block">
            <view class="section-header">
              <view class="section-title">右眼参数</view>
              <view class="section-tag">第一次配镜</view>
            </view>
            <view class="glasses-params">
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">球镜</text>
                  <text class="param-value">{{ lensParams.c_rball || '0' }}°</text>
                </view>
                <view class="param-item">
                  <text class="param-label">柱镜</text>
                  <text class="param-value">{{ lensParams.c_rpole || '0' }}°</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">散光轴向</text>
                  <text class="param-value">{{ lensParams.c_rline || '0' }}°</text>
                </view>
                <view class="param-item">
                  <text class="param-label">直径</text>
                  <text class="param-value">{{ lensParams.c_diar || '0' }}mm</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">瞳高</text>
                  <text class="param-value">{{ lensParams.ph_r || '0' }}</text>
                </view>
                
                <view class="param-item">
                  <text class="param-label">瞳距</text>
                  <text class="param-value">{{ lensParams.pd_r || '0' }}</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label" style="width: 180rpx;">后表面离焦量</text>
                  <text class="param-value">{{ lensParams.c_radd || '0' }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 左眼参数 -->
          <view class="parameter-block">
            <view class="section-header">
              <view class="section-title">左眼参数</view>
              <view class="section-tag">第一次配镜</view>
            </view>
            <view class="glasses-params">
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">球镜</text>
                  <text class="param-value">{{ lensParams.c_lball || '0' }}°</text>
                </view>
                <view class="param-item">
                  <text class="param-label">柱镜</text>
                  <text class="param-value">{{ lensParams.c_lpole || '0' }}°</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">散光轴向</text>
                  <text class="param-value">{{ lensParams.c_lline || '0' }}°</text>
                </view>
                <view class="param-item">
                  <text class="param-label">直径</text>
                  <text class="param-value">{{ lensParams.c_dial || '0' }}mm</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">瞳高</text>
                  <text class="param-value">{{ lensParams.ph_l || '0' }}</text>
                </view>
                <view class="param-item">
                  <text class="param-label">瞳距</text>
                  <text class="param-value">{{ lensParams.pd_l || '0' }}</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label" style="width: 180rpx;">后表面离焦量</text>
                  <text class="param-value">{{ lensParams.c_ladd || '0' }}</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 加工参数 -->
          <view class="parameter-block">
            <view class="section-header">
              <view class="section-title">加工参数</view>
            </view>
            <view class="glasses-params">
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">镜框类型</text>
                  <text class="param-value">{{ lensParams.c_process_type_name || '' }}</text>
                </view>
                <view class="param-item">
                  <text class="param-label">镜片类型</text>
                  <text class="param-value">{{ lensParams.c_coating_type_name || '' }}</text>
                </view>
              </view>
              <!-- <view class="params-row">
                <view class="param-item">
                  <text class="param-label">镜片品牌</text>
                  <text class="param-value">{{ remarkObj.brand || '' }}</text>
                </view>
                <view class="param-item">
                  <text class="param-label">镜框型号</text>
                  <text class="param-value">{{ remarkObj.model || '' }}</text>
                </view>
              </view>
              <view class="params-row">
                <view class="param-item">
                  <text class="param-label">镜框颜色</text>
                  <text class="param-value">{{ remarkObj.frameColor || '' }}</text>
                </view>
                <view class="param-item">
                  <text class="param-label">镜框物流单号</text>
                  <text class="param-value">{{ remarkObj.logisticsNo || '' }}</text>
                </view>
              </view> -->
            </view>
          </view>
        </view>
        
        <!-- 底部按钮 -->
        <!-- <view class="bottom-buttons" v-if="orderData && orderData.length > 0">
          <button class="confirm-btn" @click="changeCheck" v-if="changeStatusList.indexOf(0) != -1">换新审核中</button>
          <button class="confirm-btn" style="color: #ff8f4a;font-weight: bold;" @click="changeCheckFail" v-else-if="changeStatusList.indexOf(-1) != -1">申请未通过</button>
          <button class="confirm-btn" style="font-weight: bold;" @click="checkReplaceTime" v-else-if="changeStatusList.indexOf(-2) != -1">申请未通过，请重新申请</button>
          <button class="confirm-btn" style="font-weight: bold;" v-else-if="changeStatusList.indexOf(0) != -1">换新审核中，请耐心等待</button>
          <button class="confirm-btn" style="font-weight: bold;" v-else-if="changeStatusList.indexOf(1) != -1">换新审核中，请耐心等待</button>
          <button class="confirm-btn" v-else-if="changeStatusList.indexOf(2) != -1">质保换新已完成</button>
          <button class="confirm-btn" @click="checkReplaceTime" v-else>申请换新</button>
        </view> -->
        <!-- 申请换新弹窗 -->
        <view class="exchange-popup" v-if="showExchangePopup">
          <view class="popup-content">
            <view class="popup-header">
              <text class="popup-title">申请换新</text>
              <view class="popup-close" @click="closeExchangePopup">&times;</view>
            </view>
            <view class="popup-body">
              <text class="popup-description">请上传最新验光单，我们将为您审核是否符合换新条件</text>
              <view class="upload-area" @click="uploadOptometry">
                <view v-if="optometryImg == null || optometryImg == ''">
                  <view class="upload-icon">
                    <text>+</text>
                  </view>
                  <text class="upload-text">点击上传验光单照片</text>
                  <text class="upload-tips">支持JPG、PNG格式，不超过5MB</text>
                  <!-- <view class="uni-flex" style="flex-wrap: wrap;">
                  <view v-for="(image, index) in imageList" :key="index" class="uni-uploader__input-box"
                    style="border: 0;">

                  </view>
                </view> -->
                </view>
                <view v-else>
                  <view class="image-container" style="border: 0;">
                    <image :src="optometryImg" class="upload-image" />
                  </view>
                </view>
              </view>
            </view>
            <view class="popup-body">
              <text class="popup-description">请上传最新配镜处方，我们将为您审核是否符合换新条件</text>
              <view class="upload-area" @click="uploadPrescription">
                <view v-if="prescriptionImg == null || prescriptionImg == ''">
                  <view class="upload-icon">
                    <text>+</text>
                  </view>
                  <text class="upload-text">点击上传配镜处方照片</text>
                  <text class="upload-tips">支持JPG、PNG格式，不超过5MB</text>
                  <!-- <view class="uni-flex" style="flex-wrap: wrap;">
                  <view v-for="(image, index) in imageList" :key="index" class="uni-uploader__input-box"
                    style="border: 0;">

                  </view>
                </view> -->
                </view>
                <view v-else>
                  <view class="image-container" style="border: 0;">
                    <image :src="prescriptionImg" class="upload-image" />
                  </view>
                </view>
              </view>
            </view>
            <view class="section-title">选择镜片</view>
            <view class="radio-group">
              <view class="radio-item" v-if="lensLeft && lensRight" :class="{ active: selectedLens === 'ALL' }" @click="selectLens('ALL')">
                <view class="radio-circle"></view>
                <text>全部镜片</text>
              </view>
              <view class="radio-item" :class="{ active: selectedLens === 'L' }" @click="selectLens('L')">
                <view class="radio-circle"></view>
                <text>左眼镜片</text>
              </view>
              <view class="radio-item" :class="{ active: selectedLens === 'R' }" @click="selectLens('R')">
                <view class="radio-circle"></view>
                <text>右眼镜片</text>
              </view>
            </view>
            <view class="popup-footer">
              <button class="cancel-btn" @click="closeExchangePopup">取消</button>
              <button class="submit-btn" @click="submitExchange">提交申请</button>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 简单的提示弹窗 -->
    <view class="simple-popup" v-if="showWarrantyTip">
      <view class="popup-overlay" @click="hideWarrantyTip"></view>
      <view class="popup-content">
        <view class="popup-message">没有激活的质保，如果已经购买<view class="active-btn" @click="toScanQuality">请先激活</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import pageNavBar from '../component/pageNavBar.vue';
import {config} from '../../common/http/config';
export default {
  components: {
    pageNavBar
  },
  data() {
    return {
      orderData: null, // 订单数据
      qrCodeContent: '', // 二维码内容
      lensParams: {}, // 镜片参数
      showAddFields: true, // 是否显示额外字段
      userInfo: {},
      showExchangePopup: false, // 控制申请换新弹窗显示
      showWarrantyTip: false,
      lensChangeItem: [], // 镜片换新时间
      selectedLens: '', // 选中的镜片
      imageList: [], // 上传的图片列表
      resImg: '', // 上传后的图片路径
      orderId: [], // 订单ID
      lensLeft: false, // 是否有左镜片
      lensRight: false, // 是否有右镜片
      optometryImg: null, // 验光单图片路径
      prescriptionImg: null, // 配镜处方图片路径
      isChange: false, // 是否可以换新
      changeStatusList: [], // 镜片换新状态列表
      checkChangeStatusList: [-2,-1,2000,20001,2002],
      remarkObj: {
        userName: '',
        brand: '',
        model: '',
        frameColor: '',
        logisticsNo: '',
        remark: '',
      },
    }
  },
  computed: {
  },
  onLoad(options) {
    this.getUserInfo()
  },
  methods: {
    // 切换镜片选择
    selectLens(lens) {
      this.orderId = []
      this.selectedLens = lens;
      // 检查是否有订单数据
      if (this.orderData && this.orderData.length > 0) {
        // 遍历订单数据，找到匹配的镜片
        const foundItem = this.orderData.find(item => item.eye === lens && this.remainingDays(item) > 0);
        if (foundItem) {
          this.orderId.push(foundItem.orderId);
        } else if (lens === 'ALL') {
          for (let item of this.orderData) {
            console.log('item',item)
            if (this.remainingDays(item) > 0) {
              this.orderId.push(item.orderId);
            }
            console.log('this.orderId',this.orderId)
          }
        }
      }
    },
    // 计算剩余天数（到期日期 - 当前日期）
    remainingDays(item) {
      // 检查item是否存在
      if (!item) {
        return 0;
      }
      const now = new Date();
      if (item.expireTime) {
        const expireDate = new Date(item.expireTime.split(' ')[0]);
        // 计算剩余毫秒数
        const diffTime = expireDate - now;
        // 转换为天数
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        // 返回不小于0的天数
        return Math.max(0, diffDays);
      }
      return 0;
    },
    // 打开申请换新弹窗
    openExchangePopup() {
      this.showExchangePopup = true;
    },
    // 关闭申请换新弹窗
    closeExchangePopup() {
      this.showExchangePopup = false;
    },
    hideWarrantyTip() {
      this.showWarrantyTip = false;
    },
    // 上传配镜处方
    uploadPrescription() {
      // 这里可以调用uni.chooseImage等API实现图片上传功能
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.prescriptionImg = res.tempFilePaths[0];
          // 使用uni.uploadFile处理文件上传
          var baseURL = config.baseURL
          uni.uploadFile({
            url: baseURL + '/app/base/comm/upload',
            filePath: this.prescriptionImg,
            name: 'file',
            header: {
              'Content-Type': 'multipart/form-data',
              Authorization: uni.getStorageSync('token')
            },
            success: (uploadRes) => {
              console.log('上传成功:', uploadRes);
              // 处理上传成功的逻辑
              try {
                const data = JSON.parse(uploadRes.data);
                console.log('上传结果:', data);
                this.prescriptionImg = data.data
              } catch (e) {
                console.error('解析上传结果失败:', e);
              }
            },
            fail: (err) => {
              console.error('上传失败:', err);
            }
          });
        }
      });
    },
    // 上传验光单
    uploadOptometry() {
      // 这里可以调用uni.chooseImage等API实现图片上传功能
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.optometryImg = res.tempFilePaths[0];

          // 使用uni.uploadFile处理文件上传
          var baseURL = config.baseURL
          uni.uploadFile({
            url: baseURL + '/app/base/comm/upload',
            filePath: this.optometryImg,
            name: 'file',
            header: {
              'Content-Type': 'multipart/form-data',
              Authorization: uni.getStorageSync('token')
            },
            success: (uploadRes) => {
              console.log('上传成功:', uploadRes);
              // 处理上传成功的逻辑
              try {
                const data = JSON.parse(uploadRes.data);
                console.log('上传结果:', data);
                this.optometryImg = data.data
              } catch (e) {
                console.error('解析上传结果失败:', e);
              }
            },
            fail: (err) => {
              console.error('上传失败:', err);
            }
          });
        }
      });
    },
    // 提交申请
    submitExchange() {
      if (this.prescriptionImg == null || this.prescriptionImg == '') {
        uni.showToast({
          title: '请上传配镜处方照片',
          icon: 'none'
        })
        return
      }
      
      if (!this.optometryImg) {
        uni.showToast({
          title: '请上传验光单照片',
          icon: 'none'
        })
        return
      }

      if (!this.selectedLens) {
        uni.showToast({
          title: '请选择镜片',
          icon: 'none'
        })
        return
      }
      if (!this.orderId) {
        uni.showToast({
          title: '该镜片不在换新保障期内',
          icon: 'none'
        })
        return
      }
      console.log(this.orderId)
      this.$http.POST('/app/order/order/submitReplaceOrder', {
        scanUserId: this.userInfo.id,
        eye: this.selectedLens,
        prescriptionImg: this.prescriptionImg,
        optometricsImg: this.optometryImg,
        orderId: this.orderId,
      }, (res) => {
        uni.showToast({
          title: '申请已经提交成功，请等待审核',
          icon: 'success'
        })
        // 刷新
        uni.redirectTo({
          url: '/pages/quality/qualityInfo'
        })
      }, (err) => {
        console.log(err)
        uni.showToast({
          title: err.message,
          icon: 'none'
        })
      })
      this.closeExchangePopup();
    },
    // 检查是否过期
    checkReplaceTime() {
      // 清空之前的数据
      this.lensChangeItem = [];

      // 检查orderData是否存在且非空
      if (this.orderData && this.orderData.length > 0) {
        for (let item of this.orderData) {
          if (this.remainingDays(item) > 0) {
            this.lensChangeItem.push(item.eye)
          }
        }

        if (this.lensChangeItem.length > 0) {
          this.showExchangePopup = true;
        } else {
          uni.showToast({
            title: '没有在质保期限内的镜片，如果已经购买请先激活',
            icon: 'none'
          })
          this.showExchangePopup = false;
        }
      } else {
        uni.showToast({
          title: '没有质保信息，请先激活',
          icon: 'none'
        })
        this.showExchangePopup = false;
      }
    },

    // 获取用户信息
    getUserInfo() {
      const that = this
      this.$http.GET('/app/user/info/person', {}, function (res) {
        console.log('成功获取用户信息', res);
        that.userInfo = res.data
        that.getQualityActive()
      })
      console.log(that.userInfo)
    },

    // 跳转至扫描二维码页面
    toScanQuality() {
      this.$tools.routerTo('/pages/quality/scanQuality2', 'navigateTo', 'none')
    },

    // 查询镜片激活信息
    getQualityActive() {
      const that = this
      that.$http.POST('/app/order/order/queryActiveOrder', {
        scanUserId: that.userInfo.id
      }, (res) => {
        that.orderData = res.data
        that.lensParams = res.data[0].optometrics
        if (that.lensParams.remark) {
          const remarkParts = that.lensParams.remark.split(',');
          that.remarkObj.userName = remarkParts[0];
          that.remarkObj.brand = remarkParts[1];
          that.remarkObj.model = remarkParts[2];
          that.remarkObj.frameColor = remarkParts[3];
          that.remarkObj.logisticsNo = remarkParts[4];
          that.remarkObj.remark = remarkParts[5];
        }
        res.data.forEach(item => {
          this.changeStatusList.push(item.changeStatus)
          if (item.eye === 'L') {
            that.lensLeft = true;
            that.lensParams.c_dial = item.optometrics.c_dial
            that.lensParams.c_lline = item.optometrics.c_lline
            that.lensParams.c_ladd = item.optometrics.c_ladd
            that.lensParams.c_lball = item.optometrics.c_lball
            that.lensParams.c_lpole = item.optometrics.c_lpole
            that.lensParams.pd_l = item.optometrics.pd_l
            that.lensParams.ph_l = item.optometrics.ph_l
            that.lensParams.c_coating_type_name_l = item.optometrics.c_coating_type_name
          } else if (item.eye === 'R') {
            that.lensRight = true;
            that.lensParams.c_diar = item.optometrics.c_diar
            that.lensParams.c_rline = item.optometrics.c_rline
            that.lensParams.c_radd = item.optometrics.c_radd
            that.lensParams.c_rball = item.optometrics.c_rball
            that.lensParams.c_rpole = item.optometrics.c_rpole
            that.lensParams.pd_r = item.optometrics.pd_r
            that.lensParams.ph_r = item.optometrics.ph_r
            that.lensParams.c_coating_type_name_r = item.optometrics.c_coating_type_name
          }
        })
      }, (err) => {
        // 触发提示弹窗显示
        // that.showWarrantyTip = true;
        // 弹出二次确认弹窗，确认后跳转至扫描二维码页面
        uni.showModal({
          title: '提示',
          content: err.message,
          success: (res) => {
            if (res.confirm) {
              this.$tools.routerTo('/pages/quality/scanQuality', 'redirectTo', 'none')
            } else {
              this.$tools.routerTo('/pages/quality/scanQuality', 'redirectTo', 'none')
            }
          }
        })
      })
    },
    // 换新审核中
    changeCheck() {
      uni.showToast({
        title: '正在审核中，预计1-2个工作日，请耐心等待。',
        icon: 'none',
        className: 'toast-custom'
      })
    },
    // 申请不通过
    changeCheckFail() {
      uni.showToast({
        title: '您不符合换新条件，如有问题请联系门店',
        icon: 'none',
        className: 'toast-custom',
        duration: 3000,
        mask: true
      })
    }
  }
}
</script>

<style>
.toast-custom {
    width: 30vw !important;
    font-size: 14px !important;
}

.scan-back {
  position: absolute;
  top: 33vw;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: -1;
  /* 置于底层 */
  padding: 0vw 2vw;
}

.scan-back-image {
  width: 100%;
}

/* 置顶底图样式 */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('https://tongrenlijiaojing.oss-cn-beijing.aliyuncs.com/wechat/index_back.png');
  background-size: cover;
  background-position: center;
  
  z-index: 0;
  /* 置于底层 */
}

.quality-detail-container {
  margin-top: 30.5vw;
  padding: 0;
  box-sizing: border-box;
  /* min-height: 100vh; */
  /* background: linear-gradient(to bottom, #e6f7ff, #f0f9ff); */
  position: relative;
}

/* 换新保障剩余时间卡片样式 */
.border-card {
  border: 2rpx solid #e6e6e6;
}

.warranty-time-card {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 40rpx 20rpx;
  text-align: center;
  /* box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1); */
  position: relative;
}

.change-circle {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background-color: #66db30;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto 30rpx;
  position: relative;
}

.days-circle {
  width: 180rpx;
  height: 180rpx;
  border-radius: 50%;
  background-color: #ffb800;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto 30rpx;
  box-shadow: 0 2rpx 6rpx rgba(158, 158, 158, 0.388);
  position: relative;
}

.days-circle::after {
  content: '';
  position: absolute;
  top: -5rpx;
  right: -5rpx;
  width: 40rpx;
  height: 40rpx;
  background-color: #ffb800;
  border-radius: 50%;
  border: 6rpx solid #ffffff;
  box-shadow: 0 2rpx 6rpx rgba(158, 158, 158, 0.388);
}

.days-number {
  font-size: 64rpx;
  font-weight: bold;
  color: #ffffff;
  line-height: 1;
}

.days-unit {
  font-size: 32rpx;
  color: #ffffff;
  margin-top: 4rpx;
}

.warranty-time-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  display: block;
  margin-bottom: 10rpx;
}

.submit-change-time {
  font-size: 3.2vw;
  color: #333333;
  font-weight: 500;
  display: block;
  margin-bottom: 10rpx;
}

.warranty-time-total {
  font-size: 3vw;
  color: #9e9e9e;
  display: block;
}

/* 镜片信息区域 */
.lens-info-section {
  margin: 5vw;
  overflow: hidden;
}

/* 保修卡片样式 */
.warranty-card {
  border-radius: 15rpx;
  padding: 40rpx;
  color: #000000;
  background-color: #fff;
  border: 2rpx solid #dfdfdf;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 5vw;
}

.user-info-card {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 24rpx;
  display: block;
}

.user-basic-info {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  background-color: #f0f0f0;
}

.avatar image {
  width: 100%;
  height: 100%;
}

.user-details {
  margin-left: 20rpx;
}

.user-name {
  font-size: 32rpx;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
  font-weight: bold;
}

.user-relation {
  font-size: 26rpx;
  color: #666;
}

.user-info-grid {
  display: block;
  margin-bottom: 30rpx;
}

.info-item {
  flex: 1;
}

.info-label {
  font-size: 26rpx;
}

.info-value {
  font-size: 28rpx;
  color: #000000;
  display: block;
  margin-bottom: 8rpx;
}

.user-phone {
  padding-top: 30rpx;
  /* border-top: 1rpx solid #f0f0f0; */
}

.warranty-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.status-tag {
  background-color: #E6F7E9;
  color: #00C853;
  padding: 4rpx 20rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.status-tag-expired {
  background-color: #FF4D4F;
  color: #FFECEC;
  padding: 4rpx 20rpx;
  border-radius: 16rpx;
  font-size: 24rpx;
  font-weight: 500;
}

.warranty-title {
  font-size: 36rpx;
  font-weight: bold;
}

.warranty-desc {
  font-size: 28rpx;
  margin-bottom: 30rpx;
  opacity: 0.9;
}

.warranty-info {
  display: flex;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
}

.info-row {
  flex: 1;
}

.info-row:last-child {
  text-align: right;
}

.info-text {
  display: block;
  font-size: 24rpx;
  opacity: 0.8;
  margin-bottom: 8rpx;
}

.info-value {
  font-size: 28rpx;
  font-weight: bold;
}

.shop-info {
  margin-bottom: 30rpx;
}

.shop-label {
  display: block;
  font-size: 24rpx;
  opacity: 0.8;
  margin-bottom: 8rpx;
}

.shop-name {
  font-size: 28rpx;
}

.warranty-tip {
  display: flex;
  align-items: flex-start;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  padding: 20rpx;
}

.tip-icon {
  width: 36rpx;
  height: 36rpx;
  background-color: #fff;
  color: #089790;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: bold;
  margin-right: 16rpx;
  flex-shrink: 0;
}

.tip-text {
  font-size: 24rpx;
  opacity: 0.9;
  flex: 1;
  line-height: 1.5;
}

.lens-params-section {
  margin: 5vw 5vw 0vw 5vw;
  padding: 0;
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
}

.main-title {
  text-align: left;
  padding: 30rpx 40rpx;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
}

.parameter-block {
  padding: 2vw 5vw;
  border-bottom: 1px solid #f0f0f0;
}

.parameter-block:last-child {
  margin-bottom: 15vw;
  border-bottom: none;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  text-align: left;
  padding: 0;
  color: #333;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 0;
}

.section-tag {
  font-size: 24rpx;
  color: #666;
  background-color: #f5f5f5;
  padding: 6rpx 20rpx;
  border-radius: 16rpx;
}

.info-content {
  padding: 0vw 5vw;
}

.glasses-params {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  box-shadow: none;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5vw;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.param-label {
  color: #666;
  font-size: 28rpx;
  width: 120rpx;
}

.info-value {
  font-size: 28rpx;
  flex: 1;
}

.param-value {
  color: #333;
  font-size: 28rpx;
  font-weight: 500;
  flex: 1;
  text-align: right;
}

.status-unactive {
  color: #ff6b6b;
}

/* 镜片参数区域 */
.params-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.params-row:last-child {
  margin-bottom: 0;
}

.param-item {
  display: flex;
  align-items: center;
  width: 48%;
}

/* 底部按钮 */
/* 简单提示弹窗样式 */
.simple-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.popup-content {
  position: relative;
  background-color: white;
  border-radius: 12rpx;
  padding: 40rpx;
  width: 70%;
  text-align: center;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.popup-message {
  font-size: 28rpx;
  color: #333;
  line-height: 40rpx;
}

.bottom-buttons {
  align-items: center;
}

.confirm-btn {
  background-color: rgba(22, 163, 74, 0.909);
  color: #fff;
  font-size: 32rpx;
  border-radius: 5vw;
  padding: 2vw 10vw;
  margin-bottom: 5vw;
  margin-top: 5vw;
  box-shadow: 0 4rpx 12rpx rgba(102, 102, 102, 0.676);
}

.change-btn {
  background-color: #ffb800;
  color: #fff;
  font-size: 32rpx;
  border-radius: 5vw;
  border: none;
  padding: 2vw 10vw;
  margin-bottom: 5vw;
  margin-top: 5vw;
  box-shadow: 0 4rpx 12rpx rgba(102, 102, 102, 0.676);
}

/* 申请换新弹窗样式 */
.exchange-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  width: 80%;
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
}

.popup-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #000;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
}

.popup-body {
  padding: 30rpx;
}

.popup-description {
  display: block;
  font-size: 28rpx;
  color: #666;
  margin-bottom: 30rpx;
}

.upload-area {
  border: 2rpx dashed #ddd;
  border-radius: 10rpx;
  padding: 40rpx 20rpx;
  text-align: center;
  background-color: #f9f9f9;
}

.upload-icon {
  width: 100rpx;
  height: 100rpx;
  background-color: #e0e0e0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20rpx;
}

.upload-icon text {
  font-size: 60rpx;
  color: #999;
}

.upload-text {
  display: block;
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.upload-tips {
  display: block;
  font-size: 24rpx;
  color: #999;
}

.image-container {
  width: 100%;
  height: 40vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
}

.upload-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10rpx;
}

.popup-footer {
  display: flex;
  padding: 30rpx;
  border-top: none;
}

/* .popup-footer {
    display: flex;
    gap: 20rpx;
    padding: 30rpx;
  } */

.cancel-btn {
  flex: 1;
  height: 12vw;
  padding: 2vw;
  font-size: 4vw;
  font-weight: 500;
  background-color: #f5f5f5;
  color: #494949;
  border: none;
  border-radius: 3vw;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 2vw;
}

.cancel-btn:active {
  background-color: #f5f5f5;
}

.cancel-btn::after {
  border: none;
}

.submit-btn::after {
  border: none;
}

.submit-btn {
  flex: 1;
  height: 12vw;
  padding: 2vw;
  font-size: 4vw;
  font-weight: 500;
  background-color: #1dae37;
  color: #ffffff;
  border: none;
  border-radius: 3vw;
  outline: none;
  box-shadow: 0 4rpx 12rpx rgba(32, 213, 65, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.submit-btn:active {
  background-color: #1db838;
}

.submit-btn:disabled {
  background-color: #a5d6a7;
  box-shadow: none;
  height: 15vw;
}


/* 底部品牌信息 */
.footer-brand {
  text-align: center;
  padding: 30rpx 0;
  margin-top: 40rpx;
}

.footer-text {
  color: #999;
  font-size: 24rpx;
}

.active-btn {
  color: #1676bf;
  font-weight: bold;
  display: inline-block;
}

.section-title {
  font-size: 4vw;
  margin-bottom: 3vw;
  color: #333;
}

.radio-group {
  display: flex;
  margin-bottom: 4vw;
}

.radio-item {
  font-size: 3.5vw;
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 3vw;
  padding: 3vw 1vw;
  margin-right: 2.5vw;
  position: relative;
}

.radio-item:last-child {
  margin-right: 0;
}

.radio-item.active {
  border-color: #1bb458;
}

.radio-circle {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  border: 1px solid #ddd;
  margin-right: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-item.active .radio-circle {
  border-color: #1bb458;
}

.radio-item.active .radio-circle::after {
  content: '';
  width: 2vw;
  height: 2vw;
  border-radius: 50%;
  background-color: #1bb458;
}
</style>
